import React from 'react';
import { Avatar, Tag } from 'antd';
import './index.less';
import { history } from 'umi';
import configs from '../../../config/env';
interface FeedUserProps {
  userId: number;
  avatar: string;
  nickName: string | null;
  tags: string | null;
}
const FeedUser: React.FC<FeedUserProps> = (props) => {
  const { avatar, nickName, userId, tags }: FeedUserProps = props;
  const handleClickToDetail = (id: number) => {
    history.push('/feed-detail/' + id);
  };
  const handleClickTags = (tags: string) => {
    window.open('/feed?tag=' + tags);
  };
  return (
    <div className="user_item">
      <div className="top_info">
        {avatar ? (
          <Avatar
            size={180}
            src={configs[process.env.API_ENV as any].API_SERVER + avatar}
            onClick={() => handleClickToDetail(userId)}
          />
        ) : (
          <Avatar
            size={180}
            src="/images/cat.e69c9c17.jpg"
            onClick={() => handleClickToDetail(userId)}
          />
        )}

        <div className="user_name">{nickName}</div>
      </div>
      <div className="bottom_hobby">
        {tags &&
          tags.split(',').map((item, index) => (
            <Tag key={index} className="hobby_tag" onClick={() => handleClickTags(item)}>
              {item}
            </Tag>
          ))}
      </div>
    </div>
  );
};
export default FeedUser;
